<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">


    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <!--- 引入的phpMyAdmin样式 -->
    <!-- <link href="css/print.css" rel="stylesheet"> -->
    <!-- <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet"> -->

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <form role="form" class="form-inline" action="?r=tables/create_table" method="post">
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>控制</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="form_basic.html#">选项1</a>
                    </li>
                    <li><a href="form_basic.html#">选项2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
                <div class="form-group">
                    <b>数据表名：</b>
                    <input type="text" placeholder="请输入表名" id="exampleInputEmail2" class="form-control" name="table">
                </div>
                <div class="form-group">
                    <b>标注释：</b>
                     <input type="text" id="exampleInputEmail2" class="form-control" name="comment">
                </div>
                <div class="form-group">
                    <b>存储引擎：</b>
                     <div class="form-group">
                        <select name="tbl_type">
                            <option value="MRG_MYISAM" title="Collection of identical MyISAM tables">MRG_MYISAM</option>
                            <option value="MyISAM" title="MyISAM storage engine" selected="selected">MyISAM</option>
                            <option value="MEMORY" title="Hash based, stored in memory, useful for temporary tables">MEMORY</option>
                            <option value="ARCHIVE" title="Archive storage engine">ARCHIVE</option>
                            <option value="InnoDB" title="Supports transactions, row-level locking, and foreign keys">InnoDB</option>
                        </select>
                    </div>
                </div>
               
        </div>
    </div>
</div>

<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>结构</h5>
        </div>
        <div class="ibox-content">

            <table class="table">
                <thead>
                    <tr>
                        <th>名字</th>
                        <th>类型</th>
                        <th>长度/值</th>
                        <th>默认</th>
                        <th>无符号</th>
                        <th>非空</th>
                        <th>索引</th>
                        <th><abbr title="AUTO_INCREMENT">A_I</abbr></th>
                        <th>注释</th>
                    </tr>
                </thead>
                <tbody id="con">
                    <tr id="clone" class="column">
                        <td>
                            <input type="text" name="field_name[]" style="width: 70px ; height: 20px"></td>
                        <td>
                            <select class="column_type" name="field_type[]" id="field_0_2" style="width: 70px ; height: 20px">
                                <option selected="selected">INT</option>
                                <option>VARCHAR</option>
                                <option>TEXT</option>
                                <option>DATE</option><optgroup label="NUMERIC">
                                <option>TINYINT</option>
                                <option>SMALLINT</option>
                                <option>MEDIUMINT</option>
                                <option selected="selected">INT</option>
                                <option>BIGINT</option>
                                <option disabled="disabled">-</option>
                                <option>DECIMAL</option>
                                <option>FLOAT</option>
                                <option>DOUBLE</option>
                                <option>REAL</option>
                                <option disabled="disabled">-</option>
                                <option>BIT</option>
                                <option>BOOLEAN</option>
                                <option>SERIAL</option></optgroup><optgroup label="DATE and TIME">
                                <option>DATE</option>
                                <option>DATETIME</option>
                                <option>TIMESTAMP</option>
                                <option>TIME</option>
                                <option>YEAR</option></optgroup><optgroup label="STRING">
                                <option>CHAR</option>
                                <option>VARCHAR</option>
                                <option disabled="disabled">-</option>
                                <option>TINYTEXT</option>
                                <option>TEXT</option>
                                <option>MEDIUMTEXT</option>
                                <option>LONGTEXT</option>
                                <option disabled="disabled">-</option>
                                <option>BINARY</option>
                                <option>VARBINARY</option>
                                <option disabled="disabled">-</option>
                                <option>TINYBLOB</option>
                                <option>MEDIUMBLOB</option>
                                <option>BLOB</option>
                                <option>LONGBLOB</option>
                                <option disabled="disabled">-</option>
                                <option>ENUM</option>
                                <option>SET</option></optgroup><optgroup label="SPATIAL">
                                <option>GEOMETRY</option>
                                <option>POINT</option>
                                <option>LINESTRING</option>
                                <option>POLYGON</option>
                                <option>MULTIPOINT</option>
                                <option>MULTILINESTRING</option>
                                <option>MULTIPOLYGON</option>
                                <option>GEOMETRYCOLLECTION</option></optgroup>    </select>
                        </td>
                        <td><input type="text" name="field_length[]" style="width: 70px ; height: 20px"></td>
                        <td>
                            <select name="field_default_value[]" class="default_value">
                                <option value="3">NULL</option>
                                <option value="2"></option>
                                <option value="4">Empty String</option>
                            </select><input type="text" name="default_value[]" style="display:none" placeholder="请输入默认值">
                        </td>
                        <td>
                            <select style="font-size: 70%;width: 70px ; height: 20px；" name="field_attribute[]" id="field_0_6" >                
                                <option value=""></option>                
                                <option value="BINARY">BINARY</option>                
                                <option value="UNSIGNED">UNSIGNED</option>             
                                <option value="UNSIGNED ZEROFILL">UNSIGNED ZEROFILL</option>                
                                <option value="on update CURRENT_TIMESTAMP">on update CURRENT_TIMESTAMP</option>
                            </select>
                        </td>
                        <td>
                            <input name="not_null[]" id="field_0_7" type="checkbox" value="notNULL">
                        </td>
                        <td>
                            <select name="field_key[]" id="field_1_8" style="width: 70px;height: 20px">
                                <option value="none_1">---</option>
                                <option value="primary_1" title="主键">PRIMARY</option><option value="unique_1" title="唯一">UNIQUE</option>
                                <option value="index_1" title="索引">INDEX</option>
                                <option value="fulltext_1" title="全文搜索">FULLTEXT</option>
                            </select>
                         <td>
                             <input name="field_extra[]" id="field_1_9" type="checkbox" value="AUTO_INCREMENT"></td>
                         </td>
                        <td>
                            <input id="field_1_10" type="text" name="field_comments[]" size="12" value="" class="textfield">
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
    <input type="hidden" id="exampleInputPassword2" class="form-control" value="1">
    <input type="submit" value="创建表" class="btn btn-info dropdown-toggle" style="float: right;margin-right: 20px;">
     <button class="btn btn-info dropdown-toggle" type="button" id="implement" style="float: right;margin-right: 20px;">添加字段</button>
    </form>
    
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>
    
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <script src="js/demo/peity-demo.js"></script>

    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>


    <script>
        $(document).delegate('.default_value','change',function(){
            var val = $(this).val();
            var _this = $(this)
            if(val == 2)
            {
               _this.next().show();
            }
            else
            {
                _this.next().hide();
            }
        });
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });

        // 克隆对象

        // 全选
        $(function(){
            $("#selected").click(function(){
            
            })
        });
        $('#implement').click(function(){
            var num = $('#exampleInputPassword2').val();  //插入几行
            var tr = $('#clone').html();
            for(var i=0;i<num;i++)
            {
                var str = '';
                str+='<tr>'
                str+=tr
                str+='</tr>'
                $('#con').append(str);
            }
            
        });
    </script>
    


</body>

</html>